<template>
	<div
		class="xh-files-cont"
		:class="[disabled ? 'is_disabled' : 'is_valid']"
		v-loading="loading"
	>
		<flexbox
			class="f-header"
			:class="[disabled ? 'is_disabled' : 'is_valid']"
			v-show="!(item.radio && dataValue.length)"
		>
			<img class="f-logo" v-if="!disabled" src="./img/relevance_file.png" />
			<div class="f-name">附件</div>
			<label :for="uuid" class="f-load"></label>
			<input
				:id="uuid"
				type="file"
				:disabled="item.radio && dataValue.length > 0"
				hidden
				accept="*.*"
				multiple
				@change="xhUploadFile"
			/>
		</flexbox>
		<div class="f-body">
			<div class="f-item" v-for="(value, index) in dataValue" :key="index">
				<img class="f-img" src="./img/relevance_file.png" />
				<div class="f-name" @click="onDownLoad(value)">
					{{ value }}
				</div>
				<div class="f-button">
					<i class="el-icon-close" @click="deleteFile(item, index)"></i>
					<!-- <i class="el-icon-download" @click="onDownLoad(item)"></i> -->
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import arrayMixin from './arrayMixin'
import { crmFileCloudSave } from '@/api/common'
import { fileSize } from '@/utils/index'
import { v4 } from 'uuid'
export default {
	name: 'xh-files', // 新建 file  以数组的形式上传
	mixins: [arrayMixin],
	data() {
		return {
			uuid: v4(),
			loading: false,
			// 批量上传参数
			filesLength: 0, // 批量上传时，共有几个要传
			fileComplete: 0 // 批量上传时，上传到第几个
		}
	},
	props: {
		crmType: [String]
	},
	created() {
		if (this.value.length) {
			this.batchId = this.value[0].batchId
		}
		this.$on('open', this.selectImage)
	},
	watch: {
		value: function (val) {
			this.dataValue = JSON.parse(JSON.stringify(val))
			this.batchId = val.length ? val[0].batchId : ''
		}
	},
	methods: {
		// selectImage() {
		// 	if (!this.disabled) {
		// 		document.getElementById('xhImageInput' + this.uuid).click()
		// 	}
		// },
		/** 图片选择出发 */
		xhUploadFile(event) {
			var files = event.target.files
			var self = this
			var firstFile = files[0]
			this.filesLength = files.length
			this.fileComplete = 0
			this.$emit('before-upload')
			this.sendFileRequest(firstFile, () => {
				for (let index = 1; index < files.length; index++) {
					const file = files[index]
					this.sendFileRequest(file)
				}
				event.target.value = ''
			})
		},
		// 发送请求
		async sendFileRequest(file, result) {
			var params = { file }
			this.loading = true
			crmFileCloudSave(params)
				.then((res) => {
					this.loading = false

					// res.size = fileSize(res.size)
					this.dataValue.push(res.data)

					this.fileComplete++
					this.$emit('value-change', {
						item: this.item,
						index: this.index,
						value: this.dataValue,
						finished: this.fileComplete == this.filesLength
					})
					if (result) {
						result()
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		/** 删除图片 */
		deleteFile(item, index) {
			this.$confirm('您确定要删除该文件吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.dataValue.splice(index, 1)
					this.$emit('value-change', {
						item: this.item,
						index: this.index,
						value: this.dataValue
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
		},
		onDownLoad(filePath) {
			window.open(filePath)
		}
	}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
/** 附件  */
.xh-files-cont {
	position: relative;
	display: inline-block;
	border-radius: 3px;
	width: 100%;
	border: 1px solid #ddd;
	padding: 3.5px 5px;
	margin: 3px;
	line-height: 15px;
}

.xh-files-cont.is_disabled {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	cursor: not-allowed;
	.f-name {
		background-color: #f0f4f8ea;
		color: #c0c4cc;
		cursor: not-allowed;
	}
}

.xh-files-cont.is_valid:hover {
	border-color: #c0c4cc;
}

.f-header {
	padding: 5px 0 5px;
	position: relative;
	.f-logo {
		position: block;
		width: 15px;
		height: 15px;
		margin-right: 8px;
	}
	.f-name {
		color: #3e84e9;
		font-size: 12px;
	}
	.f-load {
		@include absCover;
		cursor: pointer;
	}
}
.f-header.is_disabled {
	cursor: not-allowed;
}

.f-body {
	.f-item {
		padding: 3px 0;
		height: 25px;
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		.f-img {
			position: block;
			width: 15px;
			height: 15px;
			padding: 0 1px;
			margin-right: 8px;
		}
		.f-name {
			color: #666;
			font-size: 12px;
			cursor: pointer;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.f-button {
			// position: absolute;
			// right: 5px;
			// top: 50%;
			// transform: translateY(-50%);
			white-space: nowrap;
			> i {
				font-size: 14px;
				cursor: pointer;
			}
		}
	}
}
</style>
